<template>
  <div class="big-body product-detail">
    <van-nav-bar placeholder fixed title="商品详情" left-text="返回" left-arrow @click-left="$router.go(-1)" />
    <!-- 轮播图 -->
    <Swiper :imgList="detail.banners"></Swiper>
    <!-- 商品介绍 -->
    <JieShao :detail="detail"></JieShao>
  
    <!--图文详情  -->
    <Goods :imgList="detail.descPics"></Goods>
  
    <!-- 底部购物车 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartNum?cartNum:''" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button type="warning" text="加入购物车" @click="addCart" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  
  
  </div>
</template>
<script> 
import request from '../../../utils/request';
import Swiper from './detail/Swiper.vue';
import JieShao from './detail/JieShao.vue';
import Goods from './detail/Goods.vue';

export default {
  components: {
    Swiper,
    JieShao,
    Goods,
  },

  data() {
    return {
      cartNum: 0, // 购物车数量
      id: '',
      // 详情
      detail: {},
    }
  },

  created() {
    this.id = this.$route.params.id;
    this.getDetail();
    // 添加历史记录
    this.addHistory();
  },

  methods: {
    // 添加历史记录
    addHistory() {
        request.post('/history/add',{productId:this.id});
    },

    // 获取商品详情
    async getDetail() {
      let res = await request.get('/product/detail', { params: { productId: this.id } })
      this.detail = res.result;
      // 给购物车赋值
      this.cartNum = res.result.cartNum;
    },

    // 添加购物车
    async addCart() {
      let res = await request.post('/cart/add', { productId: this.id });
      // 购物车数量+1
      this.cartNum++;

    }

  }
};
</script>

<style lang="less">
@import "./detail.less";
</style>

